<template>
  <div>
    <van-nav-bar fixed title="美食天下">
      <template slot="right">
        <van-icon name="filter-o" size="18" color="black" />
      </template>
    </van-nav-bar>

    <van-tabs v-model="active" title-active-color="red" fixed class="van">
      <van-tab title="新鲜事">
        <div class="xin">
          <div v-for="(item, index) in name" :key="index">
            <div>{{ item.name }}</div>
            <img v-lazy="item.img" />
          </div>
        </div>
      </van-tab>
      <van-tab title="小贴士">
        <div class="xin">
          <div v-for="(item, index) in name1" :key="index">
            <div>{{ item.name }}</div>
            <img v-lazy="item.img" />
          </div></div
      ></van-tab>
    </van-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 2,
      name: [
        {
          img: "https://seopic.699pic.com/photo/50054/3406.jpg_wh1200.jpg",
          name: "鲜美海鲜",
        },
        {
          img: "https://seopic.699pic.com/photo/50065/2412.jpg_wh1200.jpg",
          name: "新鲜水果",
        },
        {
          img: "https://seopic.699pic.com/photo/50140/6207.jpg_wh1200.jpg",
          name: "麻辣火锅",
        },
        {
          img: "https://seopic.699pic.com/photo/50115/7506.jpg_wh1200.jpg",
          name: "营养早餐",
        },
      ],
      name1: [
        {
          img: "https://seopic.699pic.com/photo/50097/2904.jpg_wh1200.jpg",
          name: "快乐厨房的秘密",
        },
        {
          img: "https://seopic.699pic.com/photo/50171/9683.jpg_wh1200.jpg",
          name: "如何烧得一手好家常菜",
        },
        {
          img: "https://seopic.699pic.com/photo/50048/9041.jpg_wh1200.jpg",
          name: "为家人做营养早餐",
        },
        {
          img: "https://seopic.699pic.com/photo/50072/3631.jpg_wh1200.jpg",
          name: "养生秘诀大揭秘",
        },
      ],
    };
  },
};
</script>
<style>
</style>
<style lang="scss" scoped>
.van {
  width: 80vw;
  margin: 35px auto 2px auto;
  padding-bottom: 30px;
  // width: 300px;
}
img {
  width: 100%;
  // width: 300px;
}
.xin > div {
  margin: 10px 0px;
  div{
    margin-bottom:10px ;
  }
}
</style>